<template>
  <div class="welcome-wrapper">
    <el-card class="welcome-card" shadow="hover">
      <div class="head">
        <h1 class="title">欢迎使用 HIS 门诊管理系统</h1>
        <p class="subtitle">您好，{{ userStore.username }}，祝您工作顺利！</p>
      </div>
      <el-divider />
      <div class="quick-grid">
        <div v-for="item in quickLinks" :key="item.path" class="q-item" @click="go(item.path)">
          <div class="icon" :style="{background:item.color}">
            <i :class="item.icon" />
          </div>
          <div class="info">
            <div class="label">{{ item.label }}</div>
            <div class="desc">{{ item.desc }}</div>
          </div>
          <el-icon class="arrow"><arrow-right /></el-icon>
        </div>
      </div>
      <el-alert type="info" :closable="false" class="tip" show-icon>
        <template #title>
          温馨提示：请及时退出登录以保护账户安全。
        </template>
      </el-alert>
    </el-card>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ArrowRight } from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()

// 快捷入口配置
const quickLinks = [
  { label: '窗口挂号', path: '/register/counter', icon: 'el-icon-user', desc: '办理患者挂号', color: 'linear-gradient(135deg,#409eff,#66b1ff)' },
  { label: '收费', path: '/fee/charge', icon: 'el-icon-money', desc: '门诊费用收取', color: 'linear-gradient(135deg,#67c23a,#85ce61)' },
  { label: '退费', path: '/fee/refund', icon: 'el-icon-refresh', desc: '办理退费业务', color: 'linear-gradient(135deg,#e6a23c,#ebb563)' },
  { label: '费用记录', path: '/fee/log', icon: 'el-icon-document', desc: '查看费用明细', color: 'linear-gradient(135deg,#909399,#b1b3b8)' },
  { label: '检查申请', path: '/check/apply', icon: 'el-icon-search', desc: '新增检查项目', color: 'linear-gradient(135deg,#d87a80,#e89fa3)' },
  { label: '检验申请', path: '/inspect/apply', icon: 'el-icon-aim', desc: '新增检验项目', color: 'linear-gradient(135deg,#8e71c7,#a992e0)' },
]

const go = (p) => router.push(p)
</script>

<style scoped>
.welcome-wrapper { padding: 8px; }
.welcome-card { border-radius: 14px; overflow: hidden; }
.head { text-align: center; padding: 4px 0 0; }
.title { margin: 0; font-size: 26px; letter-spacing: 1px; background: linear-gradient(90deg,#409eff,#67c23a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.subtitle { margin: 6px 0 0; color: #606266; font-size: 14px; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 14px; margin: 12px 0 18px; }
.q-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #ebedf0; border-radius: 12px; cursor: pointer; background: #fff; transition: all .25s; }
.q-item:hover { box-shadow: 0 6px 18px -6px rgba(0,0,0,.08); transform: translateY(-2px); border-color: #dcdfe6; }
.icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; box-shadow: 0 4px 10px -3px rgba(0,0,0,.25); }
.info { flex: 1; min-width: 0; }
.label { font-weight: 600; color: #303133; }
.desc { font-size: 12px; color: #909399; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arrow { color: #c0c4cc; }
.q-item:hover .arrow { color: #409eff; }
.tip { border-radius: 10px; }
</style>
